<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<jsp:include page="../common/meta.jsp"></jsp:include>
<jsp:include page="../common/easyui.jsp"></jsp:include>
<title>登录后台管理</title>
</head>
<body>
	<div id="login" style="padding: 20px; width: 350px; height: 220px;">
		<table onkeydown="if(event.keyCode==13){doLogin();}" id="loginTable">
			<tr>
				<td align="right"><b style="font: 12px">用户名：</b></td>
				<td><input type="text" class="easyui-validatebox" id="userName"
					style="width: 200px;" maxlength="40" required="true"></input></td>
			</tr>
			<tr>
				<td align="right"><b style="font: 12px">密&nbsp;&nbsp;码：</b></td>
				<td><input type="password" class="easyui-validatebox"
					id="password" style="width: 200px;" maxlength="40" required="true"></input></td>
			</tr>
			<tr>
				<td align="right"><b style="font: 12px">验证码：</b></td>
				<td><input type="text" class="easyui-validatebox" id="certCode"
					style="width: 100px;" maxlength="5" required="true"></input><a><img
					border=0 src="../common/certpic.jsp"></a></td>
			</tr>
			<tr>
				<td></td>
				<td id="login_msg" style="color: red; font: 12px">&nbsp;</td>
			</tr>
			<tr>
				<td colspan="2" align="center"><a href="#"
					class="easyui-linkbutton" icon="icon-ok" onclick="doLogin();">确定</a>
					<a href="#" class="easyui-linkbutton" icon="icon-redo"
					onclick="doReset();">重置</a></td>
			</tr>
		</table>
	</div>
	<script type="text/javascript">
		$(function() {
			setDialog();

			//进入页面，焦点在用户名文本框上
			$("#userName").focus();
		});

		/**
		 * Ajax执行登录操作
		 * @return
		 */
		function doLogin() {
			var validateResult = true;
			//easyui 表单验证
			$('#loginTable input').each(function() {
				if ($(this).attr('required') || $(this).attr('validType')) {
					if (!$(this).validatebox('isValid')) {
						//如果验证不通过，则返回false
						validateResult = false;
						return;
					}
				}
			});

			if (validateResult == false) {
				//如果验证不通过，则不执行登录操作
				$("#login_msg").html("请输入用户登录信息");
				return;
			}

			$("#login_msg").html("登录中，请稍候...");

			$.ajax({
				async : false,
				cache : false,
				type : 'POST',
				dataType : "json",
				url : "loginUser.action",
				data : {
					"user.userName" : $("#userName").val(),
					"user.password" : $("#password").val(),
					"certCode" : $("#certCode").val()
				},
				error : function() {// 请求失败处理函数
					$("#login_msg").html("对不起，登录失败了");
				},
				success : function(data) { // 请求成功后处理函数。
					console.info(data);
					if (data.success == true) {
						console.info('登录成功，请稍候...');
						$("#login_msg").html(data.msg);
						window.location = "index.jsp";
					} else {//后台异常处理
						console.info('登录异常');
						$("#login_msg").html(data.msg);
					}
				}
			});
		}

		/**
		 * 执行reset操作
		 */
		function doReset() {
			$("#login_msg").html("请重新输入用户登录信息");
			$("#userName").val("");
			$("#password").val("");
			$("#certCode").val("");
			$("#userName").focus();
		}

		/**--------------操作弹出框------------------**/
		//设置弹出框的属性
		function setDialog() {
			$('#login').dialog({
				title : '用户登录',
				modal : true, //模式窗口：窗口背景不可操作
				collapsible : false, //可折叠，点击窗口右上角折叠图标将内容折叠起来
				resizable : true, //可拖动边框大小
				closable : false
			});
		}
	</script>
</body>
</html>
